<template>
  <div class="select-eqt-wrapper">
    <div class="select-eqt-left">
      <div class="title befornline">选择子设备</div>
      <BasicTable
        class="page-search-table"
        @register="registerTable"
        rowKey="id"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onSelect: leftdoSelection }"
      />
    </div>
    <div class="select-eqt-center">
      <a-button type="primary" class="array-btn" @click.stop="addData">
        <RightOutlined />
      </a-button>
      <a-button class="array-btn left-array-btn" @click.stop="reduce">
        <LeftOutlined />
      </a-button>
    </div>
    <div class="select-eqt-right">
      <div class="title" style="height: 48px">
        <!-- 已选子设备<p>数量 {{ rightdataSource.length }}</p> -->
      </div>
      <div class="select-list">
        <a-table
          rowClassName="rowClassName"
          bordered
          size="middle"
          striped
          rowKey="id"
          :pagination="false"
          :row-selection="{ selectedRowKeys: rightselectedRowKeys, onSelect: rightdoSelection }"
          :dataSource="rightdataSource"
          :columns="sleectcolumns"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref, Ref, toRefs } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { getData, tableConfig } from './tableData';
  import { ColumnProps } from 'ant-design-vue/es/table/interface';
  import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';

  type Key = ColumnProps['key'];
  export default defineComponent({
    name: 'SubEquipment',
    components: {
      BasicTable,
      LeftOutlined,
      RightOutlined,
    },
    emits: ['register', 'selectChange'],
    setup(_, { emit }) {
      const [registerTable, { getDataSource, setTableData }] = useTable(tableConfig);
      const dialogRef: Ref<any> = ref(null);
      const cloudstatusRef: Ref<any> = ref(null);
      const data = reactive<{
        selectedRowKeys: Key[];
        rightselectedRowKeys: Key[];
        rightdataSource: any[];
      }>({
        selectedRowKeys: [], //左侧key值
        rightdataSource: [],
        rightselectedRowKeys: [],
      });

      function setrightdataSource(list) {
        data.rightdataSource = list;
      }

      //左侧选中数组
      let leftDataArray: number[] = reactive([]);

      //左侧筛选
      function leftdoSelection(selectedRow) {
        if (!leftDataArray.some((item: any) => item.id == selectedRow.id)) {
          // 查找不到则添加
          leftDataArray.push(selectedRow);
        } else {
          let index = leftDataArray.findIndex((v: any) => v.id === selectedRow.id);
          leftDataArray.splice(index, 1);
        }
        data.selectedRowKeys = [];
        leftDataArray.forEach((item: any) => {
          data.selectedRowKeys.push(item.id);
        });
      }

      //右侧选中数组
      let rightDataArray: number[] = reactive([]);
      //右侧筛选
      function rightdoSelection(selectedRow) {
        if (!rightDataArray.some((item: any) => item.id == selectedRow.id)) {
          // 查找不到则添加
          rightDataArray.push(selectedRow);
        } else {
          let index = rightDataArray.findIndex((v: any) => v.id === selectedRow.id);
          rightDataArray.splice(index, 1);
        }
        data.rightselectedRowKeys = [];
        rightDataArray.forEach((item: any) => {
          data.rightselectedRowKeys.push(item.id);
        });
      }
      //添加数据
      function addData() {
        if (leftDataArray.length == 0) {
          return false;
        }
        data.selectedRowKeys = [];
        data.rightselectedRowKeys = [];
        rightDataArray = [];
        let rightData = [...leftDataArray, ...data.rightdataSource];

        //更新左侧table
        let newArr = getDataSource().filter((item) => {
          return !leftDataArray.some((ele: any) => ele.id === item.id);
        });
        setTableData(newArr);
        duplicateRemoval(rightData);
      }
      //移除数据
      function reduce() {
        if (rightDataArray.length == 0) {
          return false;
        }
        //两个数组对象去除相同的数据
        let newArr = data.rightdataSource.filter((item) => {
          return !rightDataArray.some((ele: any) => ele.id === item.id);
        });
        data.rightdataSource = newArr;
        data.rightselectedRowKeys = [];
        updateLeftData(rightDataArray);
        emit('selectChange', data.rightdataSource);
      }

      //如果右侧数据移动过来，更新table数据
      function updateLeftData(rightDataArray) {
        //获取左侧table的数据+移动过来的数据
        //let mergeData: any[] = getDataSource().concat(rightDataArray); //更新table数据
        let mergeData: any[] = [...getDataSource(), ...rightDataArray]; //更新table数据
        console.log(mergeData);
        //去重
        let newArr: any[] = [];
        let obj = {};
        for (var i = 0; i < mergeData?.length; i++) {
          if (!obj[mergeData[i].id]) {
            newArr.push(mergeData[i]);
            obj[mergeData[i].id] = true;
          }
        }
        setTableData(newArr);
      }

      //右侧数组对象去重
      const duplicateRemoval = (arr: any) => {
        let newArr: any[] = [];
        let obj: any = {};
        for (var i = 0; i < arr.length; i++) {
          if (!obj[arr[i].id]) {
            newArr.push(arr[i]);
            obj[arr[i].id] = true;
          }
        }
        leftDataArray = [];
        data.selectedRowKeys = [];
        data.rightselectedRowKeys = [];
        data.rightdataSource = newArr;
        emit('selectChange', data.rightdataSource);
      };
      return {
        rightDataArray,
        rightdoSelection,
        reduce,
        addData,
        dialogRef,
        setrightdataSource,
        cloudstatusRef,
        tableData: getData,
        registerTable,
        leftdoSelection,
        ...toRefs(data),
        sleectcolumns: [
          {
            title: '设备ID',
            dataIndex: 'id',
            key: 'id',
            align: 'center',
          },
          {
            title: '子设备名称',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
          },
        ],
      };
    },
  });
</script>
<style>
  #device_status {
    width: 100%;
  }
  .select-eqt-left .ant-table-header th:last-child {
    border-right: 1px solid #efefef !important;
  }
  .select-eqt-right .ant-table-thead > tr > th {
    background: #f7f8fd !important;
  }
</style>
<style lang="less" scoped>
  :deep(.ant-pagination) {
    margin-top: 20px !important;
  }
  .select-eqt-wrapper {
    display: flex;
    justify-content: space-between;
    .title {
      font-weight: bold;
      margin-bottom: 15px;
      font-size: 14px;
      color: #000;
      padding-left: 14px;
      box-sizing: border-box;
      position: relative;
      p {
        color: #8b949e;
        font-size: 12px;
        font-weight: normal;
        margin: 5px 0px;
      }
    }
    .befornline {
      &::before {
        content: '';
        width: 4px;
        height: 16px;
        background-color: #0663ff;
        position: absolute;
        top: 0px;
        bottom: 0px;
        margin: auto;
        left: 0px;
      }
    }
    .select-eqt-left {
      width: 71%;
      display: flex;
      flex-direction: column;
      .page-search-table {
        flex: 1;
      }
      :deep(.ant-table.ant-table-middle)
        > .ant-table-content
        > .ant-table-scroll
        > .ant-table-body
        > table
        > .ant-table-tbody
        > tr
        > td {
        padding: 10px 8px !important;
      }
    }
    .select-eqt-center {
      width: 6%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .array-btn {
        width: 32px;
        height: 32px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        &.left-array-btn {
          background-color: #f7f9fd !important;
          color: #b8c4dd !important;
          border: 1px solid #d9e0ed !important;
          margin-top: 16px;
        }
      }
    }
    .select-eqt-right {
      flex: 1;
      .title {
        margin-top: 40px;
      }
      :deep(.ant-table.ant-table-middle)
        > .ant-table-content
        > .ant-table-scroll
        > .ant-table-body
        > table
        > .ant-table-tbody
        > tr
        > td {
        padding: 10px 8px !important;
      }
      .select-list {
        height: 330px;
        overflow: auto;

        :deep(.ant-table-tbody) {
          .ant-table-row:nth-child(2n) {
            background-color: #f7f9fd !important;
          }
        }
      }
    }
  }
</style>
